<script setup lang="ts">
const { waterForm, tableHeaders } = defineProps<{
  waterForm: Object; // 定义采样时间的类型
  tableHeaders: Array<any>; // 定义采样时间的类型
  tabler: Array<any>; // 定义采样时间的类型
}>();
</script>

<template>
  <div
    v-for="(pageData, pageIndex) in tableHeaders"
    :key="pageIndex"
    class="card"
  >
    <h1 style="text-align: center">水质 菌落总数分析原始记录</h1>
    <div>SXLPHJ/JL/CX-22-37</div>
    <table class="table w">
      <tr>
        <td>任务编号</td>
        <td colspan="2">
          {{ waterForm.task_name }}
        </td>
        <td>采样日期</td>
        <td colspan="2">
          {{ waterForm.sampling_time }}
        </td>
        <td>分析日期</td>
        <td colspan="2">
          {{ waterForm.anal_time }}
        </td>
      </tr>
      <tr>
        <td>分析方法</td>
        <td colspan="8">
          {{ waterForm.method }}
        </td>
      </tr>
      <tr>
        <td>分析仪器</td>
        <td colspan="2">
          {{ waterForm.device?.device_name?.join("\n") }}
        </td>
        <td colspan="1">仪器型号</td>
        <td colspan="2">
          {{ waterForm.device?.device_model?.join("\n") }}
        </td>
        <td colspan="1">仪器编号</td>
        <td colspan="2">
          {{ waterForm.device?.device_number?.join("\n") }}
        </td>
        <!--          选择仪器组件-->
        <!-- <Device :water-form="waterForm"></Device> -->
      </tr>
      <tr>
        <td>环境温度</td>
        <td colspan="2">
          {{ waterForm.temperature }}
        </td>
        <td>环境条件</td>
        <td colspan="2">
          {{ waterForm.humidity }}
        </td>
        <td>样品类别</td>
        <td colspan="2">
          {{ waterForm.category_id }}
        </td>
      </tr>
      <tr>
        <td>培养箱编号</td>
        <td colspan="2">
          {{ waterForm.pyxbh }}
        </td>
        <td>培养温度</td>
        <td colspan="2">
          {{ waterForm.pywd }}
        </td>
        <td>培养时间</td>
        <td colspan="2">
          {{ waterForm.pysj }}
        </td>
      </tr>
    </table>
    <table class="table w">
      <tr>
        <td
          v-for="(key, index) in Object.keys(tableHeaders[0][0])"
          :key="index"
          :colspan="index > 0 ? 1 : ''"
        >
          {{ key }}
        </td>
      </tr>
      <tr v-for="(row, rowIndex) in pageData" :key="rowIndex">
        <td v-for="(key, colIndex) in Object.keys(row)" :key="colIndex">
          <div
            style="
              height: 25px;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            {{ row[key] }}
          </div>
        </td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="8">
          {{ waterForm.notes }}
        </td>
      </tr>
    </table>

    <div
      style="
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
      "
    >
      <div>分析人：</div>
      <div>校核人：</div>
      <div>审核人：</div>
      <div>
        第 {{ tableHeaders.length }} 页 / 共 {{ tableHeaders.length }} 页
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置表格的边框、外边距等 */
table {
  border-collapse: collapse;
  width: 100%;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 2px 10px;
  font-size: 11px;
  text-align: center;
  height: 25px;
}

tr {
  page-break-inside: avoid;
}

.fs12 {
  font-size: 12px;
}

.w tr td:nth-child(1) {
  width: 200px !important;
  white-space: nowrap;
}

.table {
  width: 100%;
}

/* 打印时隐藏所有默认的头部和尾部 */
@media print {
  /* 隐藏页眉和页脚 */
  @page {
    margin: 0;
  }

  table {
    page-break-inside: avoid;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  th,
  td {
    page-break-inside: avoid;
  }

  body {
    margin: 0;
    padding: 0;
    zoom: 100%;
  }

  div {
    page-break-inside: avoid;
  }

  /* 禁用打印页脚和页眉 */
  .no-print {
    display: none;
  }

  /* 如果你不想打印特定元素，可以这样设置 */
  header,
  footer,
  nav,
  .no-print {
    display: none !important;
  }

  /* 保证内容区域不受其他元素影响 */
  .content {
    display: block;
  }
}
</style>
